<template>
  <div class="header">
    <div class="header-menu">
      <a href="#/" class="logo-a">
        <img src="@/assets/images/logo_small.png" alt="" class="logo" />
      </a>

      <ul class="menu-bar">
        <li class="links" :class="route.path === item.path ? 'active' : ''" v-for="(item, index) in navList">
          <a :href="`#${item.path}`" class="nav-a">{{ item.title }}</a>
          <div v-if="item.hasSub" class="submenu">
            <ul class="submenu-box">
              <li
                v-for="(subItem, subIndex) in item.submenu"
                class="submenu-item"
                @click="goPage(item.path, index, subIndex)"
              >
                <div class="submenu-a">{{ subItem.title }}</div>
              </li>
            </ul>
          </div>
        </li>
      </ul>

      <div class="menu-link">
        <button type="button" @click="mainStore.isShowDialog = true">导航栏</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { $http } from '@/service/request'
import { useMainStore } from '@/store/mainStore'

const router = useRouter()
const route = useRoute()
const mainStore = useMainStore()

const navList = ref([
  {
    title: '首页',
    hasSub: false,
    path: '/'
  },
  {
    title: '新闻中心',
    hasSub: true,
    path: '/news',
    submenu: [
      {
        title: '行业动态'
      },
      {
        title: '公司新闻'
      }
    ]
  },
  {
    title: '关于我们',
    hasSub: true,
    path: '/about',
    submenu: []
  },
  {
    title: '联系我们',
    hasSub: false,
    path: '/contact'
  },
  {
    title: '加入我们',
    hasSub: false,
    path: '/join'
  }
])
const getCategoryList = async () => {
  const { data } = await $http('queryCategoryList', {})
  navList.value[2].submenu = data
}
const goPage = (path, index, subIndex) => {
  if (index === 1) {
    // 新闻中心
    const id = subIndex === 0 ? 2 : 8
    router.push({ path, query: { id } })
  }
  if (index === 2) {
    // 关于我们
    localStorage.setItem('scrollId', subIndex)
    if (path == route.path) {
      // 如果当前已经在这个页面不跳转 直接滚动页面
      let toElement = document.getElementById(`tabs${subIndex}`)
      toElement.scrollIntoView(true)
    } else {
      // localStorage.setItem('scrollId', subIndex)
      router.push({ path })
    }
  }
}
getCategoryList()
</script>
<style lang="scss" scoped>
.header {
  width: 100%;
  background: #fff;
  position: fixed;
  -webkit-overflow-scroll: touch;
  left: 0;
  top: 0;
  z-index: 11;
  height: 80px;
  transform: translateZ(0);
  transition: all 0.3s linear;
  //border-bottom: 1px solid #ebe9e9;
}

.logo-a {
  display: flex;
}
.logo {
  //width: 242px;
  height: 40px;
  margin: 18px 0 22px;
}
.header-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 30px;
  margin: 0 auto;
  font-family: PingFangSC-Regular;
  color: #333;
  font-weight: 400;
}

.menu-bar {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}

.links {
  position: relative;
  margin-left: 64px;
  height: 80px;
  display: flex;
  align-items: center;
  font-size: 16px;

  &:after {
    position: absolute;
    content: '';
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 2px;
    background: #3a5ecf;
    transition: all 0.5s ease 0s;
    z-index: 3;
  }

  &:hover .submenu {
    display: block;
  }
}

.links.active,
.links:hover {
  .nav-a {
    color: #3a5ecf;
  }
}

.links.active:after {
  width: 100%;
}

.links:hover:after {
  width: 100%;
}

.menu-bar:hover .active:after {
  width: 0;
}

.links.active:hover:after {
  width: 100% !important;
}

.nav-a {
  position: relative;
  color: #333;
  height: 80px;
  line-height: 80px;
}

.submenu {
  position: absolute;
  display: none;
  min-width: 160px;
  left: -48px;
  top: 79px;
  z-index: 2;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 20px 20px #0000000d;
  overflow: hidden;
  .submenu-box {
    position: relative;
    background: #fff;

    .submenu-a {
      padding: 15px 48px;
      display: block;
      color: #616161;
      cursor: pointer;
    }
  }
  .submenu-item:hover {
    background: #f6f7fa;
  }
  .submenu-a:hover {
    color: #3a5ecf;
  }
}

@media screen and (min-width: 1200px) {
  .menu-link {
    display: none;
  }
}

@media screen and (max-width: 1200px) {
  .menu-bar {
    display: none !important;
  }
}
</style>
